<template>
  <el-container>
        <Header />
          <el-container>
            <el-main style="height:710px;">
            <br>
            <link rel="stylesheet icon" href="//at.alicdn.com/t/c/font_3828548_2scs4mmv5kn.css">
            <span @click="linkToUserInfo()" class="sub"><i class="iconfont icon-person"></i>我的信息 <i class="iconfont icon-keyboard_arrow_right"></i></span>



            <span @click="linkToMyCollection()" class="sub"><i class="iconfont icon-check"></i>我的收藏 <i class="iconfont icon-keyboard_arrow_right"></i></span>



            <span @click="linkToGetQualification()" class="sub"><i class="iconfont icon-person_add"></i>成为行家 <i class="iconfont icon-keyboard_arrow_right"></i></span>
            <el-dialog
            title="提交信息"
            :visible.sync="dialogVisible"
            width="95%"
            :before-close="handleClose">
            <getQualification />
            </el-dialog>


            <span class="sub"><i class="iconfont icon-contacts"></i>我的行家信息 <i class="iconfont icon-keyboard_arrow_right"></i></span>



            <span class="sub" @click="linkToAboutUs()"><i class="iconfont icon-more_horiz"></i>关于我们 <i class="iconfont icon-keyboard_arrow_right"></i></span>



            <span class="sub" @click="linkToSpecialNotice()"><i class="iconfont icon-info"></i>特别声明 <i class="iconfont icon-keyboard_arrow_right"></i></span>
            </el-main>
          </el-container>
        <Footer :num="num"></Footer>
    </el-container>
</template>

<script>
import Footer from '../Footer.vue';
import getQualification from '../getQualification/getQualification.vue';
import Header from '../Header.vue';
export default {
    data() {
    return {
      num: "fourth",
      dialogVisible: false,
        };
    },
    components: {
        Footer,
      Header,
      getQualification
  },
  methods: {
    linkToUserInfo() {
      this.$router.push('/UserInfo');
      },
      linkToGetQualification() {
        this.dialogVisible = true;
    },
    linkToMyCollection() {
      this.$router.push('/MyCollection');
    },
    linkToAboutUs() {
      this.$router.push('/AboutUs');
    },
    linkToSpecialNotice() {
      this.$router.push('/SpecialNotice');
    },
      handleClose(done) {
            done();
      }
    }
}
</script>

<style scoped lang="less">
  
  .sub{
    padding-left:12px;
    margin-top:15px;
      background-color:darkslategrey;
      white-space: nowrap; /*强制span不换行*/
      display: inline-block; /*将span当做块级元素对待*/
      width: 100%;  /*限制宽度*/
      overflow: hidden; /*超出宽度部分隐藏*/
      text-overflow: ellipsis; /*超出部分以点号代替*/
      line-height: 60px; /*数字与之前的文字对齐*/
      height:60px;
      font-size:24px;
      color:lavender;
  }

  .iconfont{
    margin-right:15px;
    margin-left:4px;
    font-size:28px;
  }
.el-container {
  display: block;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
}
.el-card__body, .el-main {
   padding: 0px; 
}


.element.style {
  height: 100px;
}
.toggle-button{
background-color: #4A5064;//背景色(浅灰)
font-size: 10px;//字体大小10像素
line-height: 24px;//行高24像素
color: #fff;//字体颜色白色
text-align: center;//字体居中
letter-spacing: 0.2em;//字体之间的距离
cursor: pointer;//鼠标的形状（手形）
}
.submenu{
   display:inline-flex;
   text-align:left;
   margin-left:15px;
}

.el-aside{
   background-color: #333744;
}
.el-main{
   background-color: #eaedf1;
}

/deep/.home-container{
  height: 100vh;
  width:70%;
}
</style>